<!doctype html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login</title>
    <link rel="stylesheet" type="text/css" href="./css/normalize.css"/>
    <link rel="stylesheet" type="text/css" href="./css/default.css">
    <link rel="stylesheet" type="text/css" href="./css/styles.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="./css/htmleaf-demo.css">
    <link rel="stylesheet" type="text/css" href="./css/form.css">

    <script type="text/javascript">
        function refreshCode() {
            // 1,获取验证码的图片对象
            var vcode = document.getElementById("vcode");
            // 2,设置其src属性,加时间戳
            vcode.src = "/stuInfoSystem/getCode?time=" + new Date().getTime();
        }
    </script>
</head>
<body>
<div class="wrapper">
    <div align="center" style="margin-top: 10px">
        <img src="images/icon.png" width="80px" height="80">
        <div style="margin-bottom: 15px"><h3>-学生综合素质管理系统-</h3></div>
        <form id="loginForm" class="form-horizontal">
            <span class="heading">学生登录</span>
            <div class="form-group">
                <input class="form-control" name="stuID" id="stuID" placeholder="学 号">
                <i class="fa fa-user"></i>
            </div>
            <div class="form-group help">
                <input type="password" name="stuPwd" class="form-control" id="stuPwd" placeholder="密　码">
                <i class="fa fa-lock"></i>
            </div>
            <div class="form-inline">
                <label for="checkCode" style="color:black;">验证码：</label>
                <input type="text" name="checkCode" class="form-control" id="checkCode"
                       style="width: 120px;"/>
                <a href="javascript:refreshCode()"><img src="/ShoppingMall/checkCodeServlet" th:src="@{/getCode}"
                                                        title="看不清点击刷新" id="vcode" style="margin-bottom: 10px"/></a>
            </div>
            <div class="form-group" style="margin-right: 35px;margin-top: 10px">
                <button id="login_btn" class="btn btn-default">登录</button>
            </div>
        </form>
    </div>
    <ul class="bg-bubbles">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>


<script src="./js/jquery-2.1.1.min.js"></script>
<script src="./js/layer/layer.js"></script>

<script>

    $("#login_btn").click(function (e) {
        e.preventDefault(); //阻止默认行为（表单提交）

        // 学号校验
        var id = $("#stuID").val();
        if (id === '') {
            layer.msg('学号不为空', {icon: 5, time: 700});
            return;
        }

        // 密码校验
        var pwd = $("#stuPwd").val();
        if (pwd === '') {
            layer.msg('密码不为空', {icon: 5, time: 700});
            return;
        }

        // 验证码校验
        var code = $("#checkCode").val();
        if (code === '') {
            layer.msg('验证码不为空', {icon: 5, time: 700});
            return;
        }

        // 提交表单
        var formData = $("#loginForm").serialize()
        $.post('/stuInfoSystem/doLogin', formData, function (data) {
            if ("ok" === data) {
                // 登入成功
                location.href = "/stuInfoSystem/toIndex"
            } else if ("bad check code" === data) {
                // 验证码错误
                $("#checkCode").val("");
                refreshCode();
                layer.msg('验证码错误', {icon: 5, time: 700});
            } else {
                $("#checkCode").val("");
                refreshCode();
                layer.msg('学号或密码错误', {icon: 5, time: 700});
            }
        })
    });

</script>
</body>
</html>